<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body layui-form">
            <table class="layui-table" id="articleTable" lay-filter="articleTable"></table>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="del">删除</a>
</script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/common.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/admin.js}"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin','upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var upload = layui.upload;

        // 渲染表格
        table.render({
            elem: '#articleTable',
            url: base_server + 'question/query',
            method: 'get',
            page: true,
            cellMinWidth: 100,
            cols: [
                [
                    {field: 'id', title: '编号'},
                    {field: 'title', title: '问题名称'},
                    {field: 'content', title: '内容'},
                    {field:'typeInfo', title: '类别'
                        ,templet: function(d){
                            return d.typeInfo.name
                        }
                    },
                    {field:'wxUser', title: '发布者'
                        ,templet: function(d){
                            return d.wxUser.nickName
                        }
                    },
                    {align: 'center', toolbar: '#tableBar', title: '操作', unresize: true, width: 200}
                ]
            ],
            skin: 'line',
            size: 'lg'
        });

        // 搜索按钮点击事件
        $('#concertBtnSearch').click(function () {
            var value = $('#edtSearch').val();
            table.reload('concertTable', {where: {searchValue: value}});
        });

        // 添加按钮点击事件
        $('#articleBtnAdd').click(function () {
            showAddModel();
        });

        // 工具条点击事件
        table.on('tool(articleTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') { // 删除
                layer.confirm('确定删除此数据吗？', function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req('question/delete/' + obj.data.id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 200) {
                            layer.msg(data.msg, {icon: 1});
                            obj.del();
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    }, 'DELETE');
                });
            } else if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
        });

        // 显示表单弹窗
        function showEditModel(data) {
            layer.open({
                type: 2,
                area: ['500px','500px'],
                title: '更新问题',
                content: base_server+'question/toEditPage?id='+data.id
            });
        }

    });
</script>
</html>